<template>
  <div class="container-fluid">
    <div
      v-if="articleList.length === 0"
      class="row no-gutters justify-content-center"
    >
      <el-empty
        :description="emptyTitle"
        :image-size="200"
        :image="require(`bodyLeftDefaultImage`)"
      ></el-empty>
    </div>

    <div v-else>
      <div
        style="
          padding: 20px 10px;
          border-width: 0 0 2px 0;
          border-color: #eeeeee;
          border-style: solid;
        "
        class="row no-gutters justify-content-cente"
        v-for="(item, index) in articleList"
        :key="index"
      >
        <div class="col-3 col-sm-1 col-md-2 col-xl-2 index-1">
          <div style="dispaly: inline-block;text-align:center">
            <el-avatar
              shape="square"
              :size="40"
              :src="getUserInfo(item.writerId).avatar"
            ></el-avatar>
            <div>
              <span>{{ getUserInfo(item.writerId).nick }}</span>
              <admin :isAdmin="getUser(item.writerId).isAdmin"></admin>
            </div>
          </div>
        </div>

        <div class="col-9 col-sm-11 col-md-10 index-2">
          <div class="row no-gutters">
            <div class="col-12">
              <h5>
                <strong>{{ item.title }}</strong>
              </h5>
            </div>

            <div class="col-12">
              <el-tag
                v-for="(tag, index) in item.tags"
                :key="index"
                size="mini"
                :type="tag.type"
                >{{ tag.content }}</el-tag
              >
            </div>

            <div class="col-12">
              <span>{{ item.time }}</span>
            </div>

            <div class="col-12">
              <div style="float: left">
                <span><i class="icon el-icon-view"></i></span>
                <span class="d-none d-md-inline"> 浏览 </span>
                <span> {{ item.views }} </span>

                <span><i class="icon iconfont icon-dianzan"></i></span>
                <span class="d-none d-md-inline"> 点赞 </span>
                <span> {{ item.likes }} </span>

                <span><i class="icon el-icon-chat-line-round"></i></span>
                <span class="d-none d-md-inline"> 评论 </span>
                <span> {{ item.comments }} </span>

                <span><i class="icon el-icon-star-off"></i></span>
                <span class="d-none d-md-inline"> 收藏 </span>
                <span> {{ item.collection }} </span>
              </div>

              <div
                class="read"
                @click="read(index)"
                style="float: right; cursor: pointer"
              >
                <span>阅读原文</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col index padding-20">
          <div
            v-if="articleList.length > defaultNum"
            style="cursor: pointer"
            @click="loadingMore"
          >
            <i :class="loading ? `el-icon-loading` : `el-icon-arrow-down`"></i>
            <span>{{ loading ? `加载中...` : `查看更多` }}</span>
          </div>

          <div v-else>
            <span>暂时没有更多了~</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BodyIndex from "../../pages/body/BodyIndex.vue";
import BodyLeft from "../../pages/body/BodyLeft.vue";
import BodyRight from "../../pages/body/BodyRight.vue";
import { fake } from "../../assets/fake";
import Admin from "./Admin.vue";
export default {
  components: { BodyLeft, BodyIndex, BodyRight, Admin },
  data() {
    return {
      loading: false,
      defaultNum: 9,
    };
  },
  props: {
    articleList: {
      type: Array,
      default: [],
    },
    emptyTitle: {
      type: String,
      default: "文章正在飞速赶来",
    },
  },
  methods: {
    loadingMore() {
      this.$emit("loadingMore");
      this.loading = true;
    },
    read(index) {
      this.$emit("read", index);
    },
    getUserInfo(writerId) {
      return fake.methods.getUserInfo(writerId);
    },
    getUser(writerId) {
      return fake.methods.getUser(writerId);
    },
  },
  watch: {
    articleList() {
      this.loading = false;
    },
  },
  mounted() {},
};
</script>

<style scoped>
.index {
  text-align: center;
}
.read {
  padding: 0 0;
  text-align: end;
  transition: all 0.2s;
}
.read:hover {
  color: rgb(145, 153, 151);
  transition: all 0.2s;
}
.el-tag {
  margin-right: 10px;
}
strong {
  font-size: 1.25rem;
}
span {
  font-size: 13px;
}
#span {
  border-width: 0 0 0 7px;
  border-color: skyblue;
  border-style: solid;
}
.icon {
  font-size: 15px;
}
</style>